<template>
  <div>
    <!-- 样式和class的绑定主要是 字符串-对象-数组-以及三元运算的合理运用 -->
    <!-- :class="'nihao'" -->
    <!-- :class="{liuxiao:true,ww:false}" -->
    <!-- :class="{liuxiao:isC,ppp:isA}" -->
    <!-- :class="a" -->
    <!-- :class="isA?'qweqw':'asdsad'" -->
    <!-- :class="['liuxiao','wqeqw']" -->
    <!-- :class="[isA?'qwe':'ooo','liuxiao']" -->
    <!-- class="labelP" -->
    <!-- :style="'font-size:100px'" -->
    <!-- :style="{fontSize:'12px',color:'red'}" -->
    <!-- :style="colorA" -->
    <!-- :style="isA?colorA:{color:'green'}" -->
    <!-- :style="isC?{fontSize:'100px'}:colorA" -->
    <!-- :style="[colorA,isC?{fontWeight:'bold'}:{background:'red'}]" -->
    <!-- <p>你好，我是一个P标签</p> -->

    <!-- 计算属性和方法的区别 一个是响应式依赖，只有依赖属性发生改变才会调用计算属性-->
    <!-- {{fullName}} -- {{fullNameFn()}}
    {{fullName}} -- {{fullNameFn()}}
    {{fullName}} -- {{fullNameFn()}}
    {{fullName}} -- {{fullNameFn()}}
    {{fullName}} -- {{fullNameFn()}} -->

    <!-- 计算属性的  getter 和 setter 函数用法 -->
    <!-- <input type="text" v-model="lastName">
    <input type="text" v-model="firstName">
    <input type="text" v-model="fullName"> 
    <hr>
    {{lastName}} -- {{firstName}} -- {{fullName}} -->

    <!-- 父子组件的传参 -->
    <!-- <Child @zdy='zdy' :plan='plan' :ccc='ccc'/> -->

    <!-- 插槽 -->
    <!-- <Child>
      <template v-slot:header >
        <h1>
          我是header插槽内容
        </h1>
      </template>
      <template #default>
         <h2>
           我是默认插槽渲染的内容
         </h2>
      </template>
      <template v-slot:[ft] >
        <h3>
          我是footer插槽渲染的内容
        </h3>
      </template>
      我是插槽
      {{url}}
    </Child> -->
    <!-- <Child  v-slot="slotProps">
      {{slotProps}}
    </Child> -->

    <!-- <input type="checkbox" v-autofocus> -->
    <!-- {{num | getZero | getZero('number')}} -->

    <!-- {{test()}} -->


    <!-- <p ref="ppp">我是p标签</p> -->

    <input type="text" v-model="obj.name">

  </div>
</template>

<script>
// import Child from './components/Child'
// let isA = true,isC = false;
export default {
  data() {
    return {
      //watch
      // obj:{
      //   name:'liuxiao'
      // }

      //filter
        // num:9

      //动态插槽
        // hd:'header',
        // ft:'footer'

      //父子组件传参
      // plan:'nihao'
      // plan:123,
      // ccc:12

      //////样式和class的绑定 //////
      // colorA: {
      // fontSize: "30px",
      // color: "blue",
      // },
      // isA: true,
      // isC: false,
      // a:{
      //   weqw:isA,
      //   rrewe:isC
      // }
      // firstName: "xiao",
      // lastName: "liu",
    };
  },
  watch:{
    // num(){
    //   console.log(123)
    // }
    obj:{
      handler(newVal){
        console.log(newVal)
        console.log(2213312312)
      },
      deep:true
    }
  },
  methods:{
    // zdy(arg){
      // console.log(arg)
    // }
    // fullNameFn(){
    //   console.log('methods')
    //   return this.firstName + this.lastName
    // }
    // test(){
    //   console.log('methods')
    // }
  },
  computed: {
    // fullName(vm) {
    //   console.log(vm);
    //   return this.firstName + this.lastName;
    // },
    // fullName:{
    //   get(vm){
    //     console.log(vm)
    //     return this.lastName + ' ' + this.firstName
    //   },
    //   set(newVal){
    //     let name = newVal.split(" ")
    //     this.firstName = name[1]
    //     this.lastName = name[0]
    //   } 
    // }
  },
  directives:{
    // autofocus:{
      // inserted(el,binding,vnode){
      //   console.log(vnode.context.hd)
      // }
    // }
  },
  mounted() {
    // console.log(this.$refs)
  },
  components:{
    // Child,
  },
  filters:{
    // getZero(value,number){
    //   return '0' + value + number
    // }
  },
  // mixins:[{
  //   methods:{
  //     test(){
  //       console.log('test')
  //     }
  //   }
  // }],
  // extends:{
  //   methods:{
  //     test(){
  //       console.log('extends')
  //     }
  //   }
  // }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>